<template>
  <div class="containers">
    <div class="container">

          <!-- 中间的总数据 -->
          <div class="totalData">
              <div class="totalList" v-for="(lin,index) in dataList" :key="index" @click="toPage(lin)">
                  <div class="totaName">
                      <p class="pt">{{lin.name}}</p>
                      <p class="po">{{modeList[lin.vlaue]}}</p>
                  </div>
                  <div class="totaImg">
                    <img :src="lin.img" />
                  </div>
              </div>
          </div>

      </div>
  </div>


</template>

<script>
export default {
  data() {
    return {
      dataList:[
        { name: '分享奖励', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 1 ,vlaue: 11},
        { name: '帕点', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 2,vlaue: 12 },
        { name: '释放', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610122919.png', id: 3,vlaue:13},
        { name: '1星', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610122919.png', id:4,vlaue:17 },
        { name: '2星', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 5,vlaue:18},
        { name: '3星', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610132278.png', id: 6,vlaue:19},
        { name: '4星', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610080632.png', id: 7 ,vlaue:20},
        { name: '5星', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610080632.png', id: 8 ,vlaue:21},
        { name: '6星', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610080632.png', id: 8 ,vlaue:39},
        { name: '7星', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610080632.png', id: 8 ,vlaue:40},
        { name: '经理平均释放', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 9,vlaue:22 },
        { name: '经理权益分红', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 10 ,vlaue:26},
        { name: '经理贡献分红', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 11 ,vlaue:30},
        { name: '主管平均释放', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 9,vlaue:23 },
        { name: '主管权益分红', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 10 ,vlaue:27},
        { name: '主管贡献分红', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 11 ,vlaue:31},
        { name: '总监平均释放', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 9,vlaue:24 },
        { name: '总监权益分红', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 10 ,vlaue:28},
        { name: '总监贡献分红', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 11 ,vlaue:32},
        { name: '分总平均释放', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 9,vlaue:25 },
        { name: '分总权益分红', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610092487.png', id: 10 ,vlaue:29},
        { name: '分总贡献分红', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 11 ,vlaue:33},
        { name: '平摊', nub: 0, img: 'https://pili-vod.guanxikeji.com/template/img/1709610102231.png', id: 11 ,vlaue:34},
      ],
      yeTotalOrderMoney:'',     //余额总共
      totDate:[],
      modeList:{},
    };
  },
  created() {
  },
  mounted() {
    this.getData()

  },
  methods: {


    // 获取数据
    getData(){
      this.request('admin/orderAnalysis/', 'get', {}).then(
          res => {
            if (res.errno == 0) {
              this.modeList = res.data
            }
          },
          function () {
            console.log('请求失败处理');
          }
        );
    },
    toPage(e) {
      this.$router.push({
        path: '/finance/wallet',
        query: {
          type: e.vlaue == 13 ? 3  : 0,
          value:e.vlaue
        },
      });
    },
  },
};
</script>
<style scoped>
.container{
  background-color: #f5f7fe;
  padding: 10px;
}
  .content{
    width: 100%;
  }
  .screen{
    display: flex;
  }
  .screen>p{
    font-weight: 700;
    font-size: 30px;
    color: #333333;
    margin: 20px 0;
  }
  .totalData{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .totalList{
    width: 24%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .totaName{
    display: flex;
    flex-direction: column;
  }
  .pt{
    font-size: 10px;
    font-family: Source Han Sans SC, Source Han Sans SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #999999;
  }
  .po{
    font-size: 18px;
    font-family: Source Han Sans SC, Source Han Sans SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #000000;
  }
    .totaImg{

    }
    .totaImg>img{
      width: 70px;
      height: 71px;
    }
    .iconList{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .frstchar{
      width: 59.5%;
      height: 300px;
      background-color: #fff;
      border-radius: 10px;
    }
    .lastchar{
      width: 39.5%;
      height: 300px;
      background-color: #fff;
      border-radius: 10px;
    }
    #maychar{
    width: 100%;
    height: 100%;
  }
  #maycharen{
    width: 100%;
    height: 100%;
  }
  .columnar{
    margin-top: 15px;
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: space-between;
  }
  .lopop{
    width: 49.5%;
    height: 100%;
    background-color: #fff;
  }
  #maycharenl{
    width: 100%;
    height: 100%;
  }
  #maycharenmode{
    width:100%;
    height: 100%;

  }
@media screen and (max-width: 768px) {
  .containers{
    padding: 0;
  }
  .totalData{
    display: flex;
    flex-direction: column;
  }
  .totalList{
    width: 100%;
  }
  .iconList{
    display: flex;
    flex-direction: column;
  }
  .frstchar{
    width: 100%;
  }
  .lastchar{
    width: 100%;
    height: 400px;
  }
  .columnar{
    display: flex;
    flex-direction: column;
    height: 600px;
  }
  .lopop{
    width: 100%;
  }
}



</style>
